<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="打卡规则id" :label-width="formLabelWidth" prop="settId">
                <fortress-select
                        v-model="form.settId"
                        :dictList="settIdList"
                        placeholder="请选择打卡规则id"
                        clearable
                ></fortress-select>
            </el-form-item>
            <el-form-item label="所属部门" :label-width="formLabelWidth" v-if="form.id">
             <el-select v-model="form.deptId" clearable placeholder="请选择" v-if="form.id">
                <el-option :label="selLeftTree.name" :value="selLeftTree.id">
                  <el-tree
                      :data="leftTreeData"
                      :props="{
                          children: 'children',
                          label: 'name',
                          }"
                      accordion
                      highlight-current
                      @node-click="handleSelectionChange"
                  ></el-tree>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="员工ID" :label-width="formLabelWidth" prop="userId">
                <el-input
                        v-model="form.userId"
                        autocomplete="off"
                        placeholder="请输入员工ID"
                ></el-input>
            </el-form-item>
            <el-form-item label="考勤日期" :label-width="formLabelWidth" prop="date">
                <el-date-picker
                        v-model="form.date"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="打卡时间" :label-width="formLabelWidth" prop="clockIn">
                <el-date-picker
                        v-model="form.clockIn"
                        type="datetime"
                        placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="考勤类型" :label-width="formLabelWidth" prop="type">
                <fortress-select
                        v-model="form.type"
                        :dictList="AttendanceRecordTypeEnum_oaList"
                        placeholder="请选择考勤类型"
                        clearable
                ></fortress-select>
            </el-form-item>
            <el-form-item label="标准时间（规则的时间）" :label-width="formLabelWidth" prop="gmtTime">
                <el-input
                        v-model="form.gmtTime"
                        autocomplete="off"
                        placeholder="请输入标准时间（规则的时间）"
                ></el-input>
            </el-form-item>
            <el-form-item label="考勤时间 冗余字段 统计时间用" :label-width="formLabelWidth" prop="attendanceTime">
                <el-input
                        v-model="form.attendanceTime"
                        autocomplete="off"
                        placeholder="请输入考勤时间 冗余字段 统计时间用"
                ></el-input>
            </el-form-item>
            <el-form-item label="打卡详细地址" :label-width="formLabelWidth" prop="address">
                <el-input
                        v-model="form.address"
                        autocomplete="off"
                        placeholder="请输入打卡详细地址"
                ></el-input>
            </el-form-item>
            <el-form-item label="打卡经纬度" :label-width="formLabelWidth" prop="range">
                <el-input
                        v-model="form.range"
                        autocomplete="off"
                        placeholder="请输入打卡经纬度"
                ></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
                <fortress-select
                        v-model="form.status"
                        :dictList="AttendanceRecordStatus_oaList"
                        placeholder="请选择状态"
                        clearable
                ></fortress-select>
            </el-form-item>
            <el-form-item label="是否删除" :label-width="formLabelWidth" prop="isDeleted">
                <el-switch
                      v-model="form.isDeleted"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      :active-value="1"
                      :inactive-value="2"
                ></el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
            <el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
            <el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
    import { attendancerecordInfo, attendancerecordSave, attendancerecordEdit } from "@/api/oa/attendancerecord.js";
    import { enumList,urlList, } from "@/api/public.api.js";
    
    export default {
        props: ["leftTreeData"],
        data() {
            return {
                visible: false,
                selLeftTree:{},
                form: {
                    settId:"",
                    deptId:"",
                    userId:"",
                    date:"",
                    clockIn:"",
                    type:"",
                    gmtTime:"",
                    attendanceTime:"",
                    address:"",
                    range:"",
                    status:"",
                    isDeleted:"2",
                    deptIdName:"",
                },
                formLabelWidth: "120px",
                rules: {
                },
                AttendanceRecordTypeEnum_oaList:[],
                AttendanceRecordStatus_oaList:[],
                YesNoList:[],
                settIdList:[],
            };
        },
        created() {
        },
        methods: {
            queryEnumList(){
                this.AttendanceRecordTypeEnum_oaList = [];
                enumList("AttendanceRecordType","oa").then((resp) => {
                  if (resp.code == 0) {
                    this.AttendanceRecordTypeEnum_oaList = resp.data;
                  }
                });
                this.AttendanceRecordStatus_oaList = [];
                enumList("AttendanceRecordStatus","oa").then((resp) => {
                  if (resp.code == 0) {
                    this.AttendanceRecordStatus_oaList = resp.data;
                  }
                });
                this.YesNoList = [];
                enumList("YesNo","").then((resp) => {
                  if (resp.code == 0) {
                    this.YesNoList = resp.data;
                  }
                });
            },
            queryUrlList(){
                this.settIdList = [];
                urlList("/oa/attendanceSetting/list").then((resp) => {
                  if (resp.code == 0) {
                    if (resp.data) {
                      resp.data.forEach((item) => {
                        this.settIdList.push({ code: item.id, name: item.name });
                      });
                    }
                  }
                });
            },
            init(id,treeId,treeName) {
                this.resetForm();
                this.queryEnumList();
                this.queryUrlList();
                //修改
                if (id) {
                    attendancerecordInfo(id).then((resp) => {
                        if (resp.code == 0) {
                            this.$nextTick(() => {
                                this.form = {
                                    ...this.form,
                                    ...resp.data,
                                };
                              this.selLeftTree = {
                                  id:resp.data.deptId,
                                  name:resp.data.deptIdName
                              }
                            });
                        } else {
                            this.$msg({
                                message: resp.msg,
                                type: "error",
                            });
                        }
                    });
                }else{
                  this.form.deptId=treeId;
                  this.selLeftTree={
                      id:treeId,
                      name:treeName
                  }
                }
                this.visible = true;
            },
            //提交表单数据
            submitForm() {
                this.$refs["form"].validate((valid) => {
                if (valid) {
                    //修改
                    if (this.form.id) {
                        attendancerecordEdit(this.form).then((resp) => {
                            if (resp.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!",
                                });
                            this.$emit("refreshData");
                            this.visible = false;
                            } else {
                                this.$msg({
                                    message: resp.msg,
                                    type: "error",
                                });
                            }
                        });
                    //新增
                    } else {
                        attendancerecordSave(this.form).then((resp) => {
                            if (resp.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!",
                                });
                                this.$emit("refreshData");
                                this.visible = false;
                            } else {
                                this.$msg({
                                    message: resp.msg,
                                    type: "error",
                                });
                            }
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
                });
            },
            resetForm() {
                this.form = {
                    settId:"",
                    deptId:"",
                    userId:"",
                    date:"",
                    clockIn:"",
                    type:"",
                    gmtTime:"",
                    attendanceTime:"",
                    address:"",
                    range:"",
                    status:"",
                    isDeleted:"2",
                    deptIdName:"",
                };
                this.$nextTick(() => {
                    if (this.$refs["form"]) {
                        this.$refs["form"].resetFields();
                    }
                });
            },
            //切换树数据选中状态
            handleSelectionChange(data) {
              this.selLeftTree.id = data.id
              this.selLeftTree.name = data.name
              this.form.deptId = data.id
            },
        },
    };
</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        max-height: 274px;
        padding: 7px;
        overflow: hidden;
        overflow-y: auto;
        font-weight: normal;
    }
</style>
